<style>
	.downLoadText {
		color: #958fe9;
		border: 1px solid#958fe9;
		border-radius: 40px;
		padding: 6px 30px;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}
</style>
<template>
	<div style="height: 100%;">
		<div style="margin-bottom: 10px;border-radius: 8px;padding:15px 20px 15px 32px;" class="bgfff displayFlexBet">
			<div class="displayFlex">
				<div class="displayFlex">
					<span class="color888 mr20">开始时间</span>
					<el-date-picker v-model="params.startTime" placeholder="开始时间" format="yyyy-MM-dd"
						value-format="yyyy-MM-dd" type="date" size="small" class="w130px" @change="search()">
					</el-date-picker>
					<img src="@/assets/sIcon83.png" style="width: 20px;height: 5px;" class="ml30 mr30" />
					<span class="color888 mr20">结束时间</span>
					<el-date-picker v-model="params.endTime" placeholder="结束时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
						type="date" size="small" class="w130px" @change="search()">
					</el-date-picker>
				</div>
				<el-input v-model="params.vehicleNo" placeholder="车牌号" style="width:140px" class="ml30"
					@change="search()" />

				<!-- <el-select size="small" style="width:140px" class="input-width ml30" clearable v-model="params.busiStatus"
					placeholder="使用状态" @change="search()">
					<el-option label="使用中" value="IN_USE"> </el-option>
					<el-option label="已停用" value="NOT_USE"> </el-option>
				</el-select> -->

				<el-select size="small" style="width:140px" class="input-width ml30" clearable
					v-model="params.emissionStandard" placeholder="排放标准" @change="search()">
					<el-option label="无排放阶段" value="NO_STANDARD" />
					<el-option label="国0" value="NATIONAL_STANDARD_0" />
					<el-option label="国一" value="NATIONAL_STANDARD_1" />
					<el-option label="国二" value="NATIONAL_STANDARD_2" />
					<el-option label="国三" value="NATIONAL_STANDARD_3" />
					<el-option label="国四" value="NATIONAL_STANDARD_4" />
					<el-option label="国五" value="NATIONAL_STANDARD_5" />
					<el-option label="国六" value="NATIONAL_STANDARD_6" />
					<el-option label="氢能" value="HYDROGEN" />
					<el-option label="新能源" value="NEW_ENERGY" />
					<el-option label="电动" value="ELECTRIC" />
				</el-select>

				<div style="font-family: Source Han Sans CN;font-weight: 400;font-size: 14px;color: #3A3EF4;"
					class="ml30 point" @click="search">
					查询
				</div>
			</div>
			<div class="point" @click="showChart">
				<img src="../../assets/sIcon176.png" style="width: 11px;height: 11px;" />
				<span style="font-family: Source Han Sans CN;font-weight: 400;font-size: 14px;color: #3A3EF4;"
					class="ml10">统计分析</span>
			</div>
		</div>

		<div style="margin-top: 10px;">
			<div class="displayFlexBet bgfff bra8 font15 color555" style="padding: 10px 20px 10px 32px;">
				<div style="width: 40px;">编号</div>
				<div style="width: 200px;">时间</div>
				<div style="width: 150px;">进场/出场</div>
				<div style="width: 250px;">车牌号码</div>
				<div style="width: 150px;">排放标准</div>
				<div style="width: 150px;">运输货物</div>
				<div style="width: 150px;">运输量</div>
			</div>
			<div class="bgfff bra8 font15 color555 mt10" style="padding: 10px 20px 10px 32px;">
				<el-empty v-if="tableData.list.length == 0" style="margin: 0 auto;" />
				<div v-for="(item,index) in tableData.list" :key="index" class="displayFlexBet color555 point"
					style="border-bottom: 1px solid#F8F7F9;padding-bottom: 20px;padding-top: 20px;"
					@click="$router.push('/cleanTransportation/detail?id='+item.id)">
					<div style="width: 40px;">
						{{index+1}}.
					</div>
					<div style="width: 200px;">{{item.transportTime}}</div>
					<div style="width: 150px;" class="displayFlex">
						<img v-if="item.transportType == 'OUT'" src="../../assets/sIcon177.png"
							style="width: 13px;height: 13px;" class="mr5" />
						<img v-if="item.transportType == 'IN'" src="../../assets/sIcon178.png"
							style="width: 13px;height: 13px;" class="mr5" />
						{{item.transportTypeStr}}
					</div>
					<div style="width: 250px;">{{item.vehicleNo}}</div>
					<div style="width: 150px;">{{item.emissionStandardStr}}</div>
					<div style="width: 150px;">{{item.goodsName || '--'}}</div>
					<div style="width: 150px;">{{(item.goodsQty || '--')+'吨'}}</div>
				</div>
			</div>

			<div v-show="tableData.list&&tableData.list.length>0" align="right" style="margin-top: 10px" class="displayFlexBet">
				<div class="color888 font15">数据每5分钟更新一次</div>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="tableData.pageIndex" :page-sizes="[10,20,30,50]" :page-size="tableData.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
				</el-pagination>
			</div>
		</div>

		<el-dialog title="根据查询结果统计分析" :visible.sync="dialogVisible" append-to-body width="700px">
			<div style="width: 664px;height: 280px;background: linear-gradient(0deg, #FFFFFF, #F7F8FC);"
				class="displayFlex">
				<div style="width: 220px;height: 220px;" id="chart1"></div>
				<div style="width: calc(100% - 440px);">
					<div>
						<div class="font14 color555 mb8">按车次</div>
						<div class="color555 font18">{{data1.total}}车次</div>
					</div>
					<div class="" style="display: flex;flex-wrap: wrap;margin-left: 0px;">
						<div class="legend-item" v-for="(item,index) in data1.list" :key="index"
							style="width: 50%;justify-content: flex-start;margin-top: 20px;">
							<div class="legend-color" :style="{'background':item.background}" style="margin-top: 5px;"></div>
							<div>
								<div class="color888 font13">{{item.name}}</div>
								<div>
									<span class="color333">{{item.num}}</span>
									<span class="color888">辆</span>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>

			<div style="width: 664px;height: 280px;background: linear-gradient(0deg, #FFFFFF, #F7F8FC);"
				class="displayFlex">
				<div style="width: 220px;height: 220px;" id="chart2"></div>
				<div style="width: calc(100% - 440px);">
					<div>
						<div class="font14 color555 mb8">按运输量</div>
						<div class="color555 font18">{{data2.total}}吨</div>
					</div>
					<div class="" style="display: flex;flex-wrap: wrap;margin-left: 0px;">
						<div class="legend-item" v-for="(item,index) in data2.list" :key="index"
							style="width: 50%;justify-content: flex-start;margin-top: 20px;">
							<div class="legend-color" :style="{'background':item.background}" style="margin-top: 5px;"></div>
							<div>
								<div class="color888 font13">{{item.name}}</div>
								<div>
									<span class="color333">{{item.qty}}</span>
									<span class="color888">吨</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import moment from 'moment'
	import * as echarts from 'echarts';


	let that
	export default {
		components: {},
		data() {
			return {
				dialogVisible: false,
				params: {
					ticketId: '',
					startTime: moment().startOf('month').format('YYYY-MM-DD'),
					endTime: moment().format('YYYY-MM-DD'),
					busiStatus: '',
					emissionStandard: '',
				},
				tableData: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
				data1: {},
				data2: {},
				inAndOut: {},
				colors: ['#4A30E0', '#21D189', '#0078E8', '#F04859']
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.getTableData()
		},
		methods: {

			showChart() {
				that.dialogVisible = true
				that.countDoorEmissionStandardV2()
				that.countGoodsEmissionStandardV2()
			},

			countGoodsEmissionStandardV2() {
				that.ajax({
					url: 'cleanTransportation/countGoodsEmissionStandardV2',
					contentType: 'application/json',
					data: JSON.stringify({}),
					success: function(data) {
						that.data2 = data.data

						let seriersData = []
						for (let index in data.data.list) {
							let item = data.data.list[index]
							if (index == 0) item.background = '#04E38A'
							if (index == 1) item.background = '#9DFF86'
							if (index == 2) item.background = '#7C8DFF'
							if (index == 3) item.background = '#FFE689'
							let _item = {
								value: item.qty,
								name: item.name
							}
							seriersData.push(_item)
						}
						that.formChart("chart2", seriersData, "厂外运输车辆", that.data1.percent)
					},
				})
			},

			countDoorEmissionStandardV2() {
				that.ajax({
					url: 'cleanTransportation/countDoorEmissionStandardV2',
					contentType: 'application/json',
					data: JSON.stringify({}),
					success: function(data) {
						that.data1 = data.data

						let seriersData = []
						for (let index in data.data.list) {
							let item = data.data.list[index]
							if (index == 0) item.background = '#04E38A'
							if (index == 1) item.background = '#9DFF86'
							if (index == 2) item.background = '#7C8DFF'
							if (index == 3) item.background = '#FFE689'
							let _item = {
								value: item.num,
								name: item.name
							}
							seriersData.push(_item)
						}
						that.formChart("chart1", seriersData, "厂外运输车辆", that.data1.percent)
					},
				})
			},

			// 初始化饼图
			formChart(chartId, seriesData, title = "入场", percent) {
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				let _title = "新能源及国六"

				const option = {
					color: ['#49E49F', '#B2FC7C', '#8898FF', '#FFE58F'],
					series: [{
						name: '车辆类型占比',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: true, // show属性很关键 show为true时 初始化时即会展示默认文本；show为false时，只有在鼠标悬浮在块上时 才会展示相应文本
							position: 'center', // 文本展示位置
							formatter: () => { // 格式化要展示的文本
								return `{key|${percent}%}\n{length|${_title}}` // totalCount为自定义需要展示的属性 默认文本
							},
							rich: {
								//文本样式
								key: {
									fontSize: 22,
									fontFamily: "微软雅黑",
									color: '#454c5c',
									backgroundColor: "white" // 解决偶现文本重叠问题
								},
								length: {
									fontFamily: "微软雅黑",
									fontSize: 14,
									color: '#6c7a89',
									lineHeight: 30,
									backgroundColor: "white" // 解决偶现文本重叠问题
								},
							}
						},
						labelLine: {
							show: false
						},
						data: seriesData
					}]
				}

				myChart.setOption(option)
			},

			search() {
				that.tableData.pageIndex = 1
				that.getTableData()
			},

			handleSizeChange: function(val) {
				that.tableData.pageIndex = 1;
				that.tableData.pageSize = val;
				that.getTableData();
			},

			handleCurrentChange: function(val) {
				that.tableData.pageIndex = val;
				that.getTableData();
			},


			getTableData() {
				let apiName = "cleanTransportation/pageCleanTransportation"

				that.ajax({
					url: apiName + '?ticketId=' + that.params
						.ticketId + '&pageIndex=' + that.tableData.pageIndex + '&pageSize=' + that
						.tableData.pageSize,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.tableData.list = result.data.records;
							that.tableData.total = result.data.total;
						}
					},
				})
			},


		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.dashboard-container {
		width: 100%;
		box-sizing: border-box;
		background-color: #f5f7fa;
	}

	.filter-container {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		background-color: #fff;
		padding: 15px;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.filter-item {
		margin-right: 20px;
	}

	.year-select {
		display: flex;
		align-items: center;
	}

	.year-select span {
		margin-right: 10px;
	}

	.content-container {
		display: flex;
		margin-bottom: 20px;
	}

	.left-panel {
		width: 50%;
		position: relative;
	}

	.car-count {
		text-align: center;
		margin-bottom: 10px;
	}

	.count-number {
		font-size: 36px;
		font-weight: bold;
		color: #555;
		margin-top: 40px;
	}

	.count-title {
		font-size: 14px;
		color: #555;
	}

	.pie-chart {
		height: 250px;
		width: 100%;
	}

	.legend-container {
		margin-top: 10px;
	}

	.legend-item {
		display: flex;
		margin-bottom: 5px;
	}

	.legend-color {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		margin-right: 5px;
	}

	.middle-panel {
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.transport-stats-item {
		margin-bottom: 15px;
	}

	.stats-header,
	.stats-footer {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		color: #666;
		margin-bottom: 10px;
	}

	.progress-container {
		width: 100%;
		margin: 10px 0;
	}

	.progress-bar {
		height: 20px;
		width: 100%;
		display: flex;
		border-radius: 5px;
		overflow: hidden;
	}

	.progress-segment {
		height: 100%;
	}

	.green {
		background-color: #49E49F;
	}

	.blue {
		background-color: #8898FF;
	}

	.yellow {
		background-color: #FFE58F;
	}

	.right-panel {
		flex: 1;
	}

	.bar-line-chart {
		height: 400px;
		width: 100%;
	}

	.table-container {
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 15px;
	}

	.table-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
		color: #333;
	}
</style>